<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"> 
      {{ msg }}  <button @click="msg = 123">按钮</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      // 八大生命周期函数: 这些生命周期函数, 会在vue的生命周期的不同阶段, 会自动被vue调用
      const vm = new Vue({
        el: '#app',
        data: {
          msg: 'hello vue',
          list: []
        },
				// 创建前
        beforeCreate () {
          console.log('beforeCreate 在data数据注入到实例之前, 此时实例身上没有数据')
          console.log(this.msg) // undefined
        },
				// 创建后
        created () {
          console.log('created 在data数据注入到实例之后, 此时实例身上有数据')
          console.log(this.msg) // 'hello vue'
        },
				// 挂载前
        beforeMount () {
          console.log('beforeMount 在生成的结构替换视图之前')
          console.log(document.querySelector('#app').innerHTML) // {{msg}} 
        },
				// 更新后
        mounted () {
          console.log('mounted 在生成的结构替换视图之后, 此时dom更新完成了')
          console.log(document.querySelector('#app').innerHTML) // hello vue
        },
				// 更新前 更新前这个钩子中数据已经是新数据, 视图并未更新
        beforeUpdate () {
          console.log('beforeUpdate 数据变化了, dom更新之前')
          console.log(this.msg) // 123
          console.log(document.querySelector('#app').innerHTML) // hello vue
        },
				// 更新后 更新后这个钩子数据和视图都是最新的
        updated () {
          console.log('updated 数据变化了, dom更新之后')
					console.log(this.msg) // 123
          console.log(document.querySelector('#app').innerHTML) // 123
        },
        beforeDestroy () {
          console.log('beforeDestroy')
        },
        destroyed () {
          console.log('destroyed 释放完资源了')
        }
      })
    </script>
  </body>
</html>